﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>异步加载树</title>
    <link rel="stylesheet" type="text/css" href="../../../easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../../easyui/themes/icon.css">
    <script src="../../../easyui/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="../../../easyui/jquery.easyui.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#singlewellTree").tree({
                url: '../../../Handler/WellCatalogHandler.ashx?id=-1&timespan=' + Math.random(),
                onBeforeExpand: function (node, param) {
                    //事件触发时，默认会在该url后面加上id=node.id 信息发送到服务器
                    $('#singlewellTree').tree('options').url = "../../../Handler/WellCatalogHandler.ashx?timespan=" + Math.random() + "&id=" + node.id;
                },
                onContextMenu: function (e, node) {
                    e.preventDefault();
                    // select the node
                    $('#singlewellTree').tree('select', node.target);
                    // display context menu
                    $('#mm1').menu('show', {
                        left: e.pageX,
                        top: e.pageY
                    });

                }
            });

            //菜单项单击触发事件处理程序
            $('#mm1').menu({
                onClick: function (item) {
                    /*
                    *   获取菜单信息，item参数指的是菜单项，item属性如下
                    *   时间：2013年5月1日 22:49:02
                    *   id 
                    *   text
                    *   iconCls
                    *   href
                    *   disabled
                    *   onclick
                    */
                    alert(item.text);

                    //获取当前树节点信息
                    alert($('#singlewellTree').tree('getSelected').text);
                }
            });
        });
        
    </script>
</head>
<body>
    <ul id="singlewellTree" class="easyui-tree">
    </ul>

    <div id="mm" class="easyui-menu" style="width: 120px;">
        <div onclick="append()" data-options="iconCls:'icon-add'">
            Append</div>
        <div onclick="remove()" data-options="iconCls:'icon-remove'">
            Remove</div>
    </div>

    <div id="mm1" class="easyui-menu" style="width:120px;">  
        <div>New</div>  
        <div>  
            <span>Open</span>  
            <div style="width:150px;">  
                <div><b>Word</b></div>  
                <div>Excel</div>  
                <div>PowerPoint</div>  
            </div>  
        </div>  
        <div data-options="iconCls:'icon-save'">Save</div>  
        <div class="menu-sep"></div>  
        <div>Exit</div>  
    </div>  
</body>
</html>
